<template>
  <view id="goods-params" class="goods-params">
    <table v-for="params in goodsParams" :key="params.group_id" class="params-table">
      <thead>
      <tr><th colspan="2" style="background-color: #f0f0f0">{{ params.group_name }}</th></tr>
      </thead>
      <tbody>
      <tr class="flex" v-for="param in params.params" :key="param.param_id">
        <td>{{ param.param_name }}</td>
        <td>{{ param.param_value }}</td>
      </tr>
      </tbody>
    </table>
  </view>
</template>

<script>
  /**
   * 商品参数模块
   */
  export default {
    name: "goods-params",
    props: ['goodsParams']
  }
</script>

<style lang="scss" scoped>
  .goods-params {
    background: transparent;
    padding: 10px;
    .params-table {
      width: 100%;
      text-align: left;
      border-collapse:collapse;
      th, td {
        border: 1rpx solid #ddd;
        padding: 10rpx;
        margin: 0;
        outline: 0;
      }
      td:first-child { width: 200rpx }
	  td:last-child {
		  flex:1;
	  }
    }
  }
</style>
